<table-submenu></table-submenu>

<div class="content-section introduction">
    <div>
        <span class="feature-title">Table - <span class="subitem">RowGroup</span></span>
        <span>It is easy to implement row grouping using the flexible template driven approach of the p-table. In this example, sorting
            is enabled by default to sort the data by brand initially and then a rowGroupMetadata object is created to
            represent how many rows a brand should span along with the rowIndex of the group. Similarly multiple field grouping can be implemented as well.
        </span>
    </div>
</div>

<div class="content-section implementation">
    <h3 class="first">Toggleable Row Groups</h3>
    <p-table [value]="cars" dataKey="brand">
        <ng-template pTemplate="header">
            <tr>
                <th>Vin</th>
                <th>Year</th>
                <th>Color</th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-rowData let-rowIndex="rowIndex" let-expanded="expanded" let-columns="columns">
            <tr class="ui-widget-header" *ngIf="rowGroupMetadata[rowData.brand].index === rowIndex">
                <td colspan="3">
                    <a href="#" [pRowToggler]="rowData">
                        <i [ngClass]="expanded ? 'fa fa-fw fa-chevron-circle-down' : 'fa fa-fw fa-chevron-circle-right'"></i>
                        <span>{{rowData.brand}}</span>
                    </a>
                </td>
            </tr>
        </ng-template>
        <ng-template pTemplate="rowexpansion" let-rowData let-rowIndex="rowIndex">
            <tr>
                <td>{{rowData.vin}}</td>
                <td>{{rowData.year}}</td>
                <td>{{rowData.color}}</td>
            </tr>
        </ng-template>
    </p-table>

    <h3>Subheader</h3>
    <p-table [value]="cars" sortField="brand" sortMode="single" (onSort)="onSort()">
        <ng-template pTemplate="header">
            <tr>
                <th>Vin</th>
                <th>Year</th>
                <th>Color</th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-rowData let-rowIndex="rowIndex">
            <tr class="ui-widget-header" *ngIf="rowGroupMetadata[rowData.brand].index === rowIndex">
                <td colspan="3">
                    <span style="font-weight:bold">{{rowData.brand}}</span>
                </td>
            </tr>
            <tr>
                <td>{{rowData.vin}}</td>
                <td>{{rowData.year}}</td>
                <td>{{rowData.color}}</td>
            </tr>
        </ng-template>
    </p-table>

    <h3>Rowspan</h3>
    <p-table [value]="cars" sortField="brand" sortMode="single" (onSort)="onSort()">
        <ng-template pTemplate="header">
            <tr>
                <th>Brand</th>
                <th>Vin</th>
                <th>Year</th>
                <th>Color</th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-rowData let-rowIndex="rowIndex">
            <tr>
                <td *ngIf="rowGroupMetadata[rowData.brand].index === rowIndex" [attr.rowspan]="rowGroupMetadata[rowData.brand].size">
                    {{rowData.brand}}
                </td>
                <td>{{rowData.vin}}</td>
                <td>{{rowData.year}}</td>
                <td>{{rowData.color}}</td>
            </tr>
        </ng-template>
    </p-table>

</div>

<div class="content-section documentation">
    <p-tabView effect="fade">
        <p-tabPanel header="tablerowgroupdemo.ts">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/table/tablerowgroupdemo.ts" class="btn-viewsource" target="_blank">
                <i class="fa fa-github"></i>
                <span>View on GitHub</span>
            </a>
<pre>
<code class="language-typescript" pCode ngNonBindable>
export class TableRowGroupDemo implements OnInit &#123;

    cars: Car[];

    rowGroupMetadata: any;

    constructor(private carService: CarService) &#123; &#125;

    ngOnInit() &#123;
        this.carService.getCarsMedium().then(cars => &#123;
            this.cars = cars;
            this.updateRowGroupMetaData();
        &#125;);
    &#125;

    onSort() &#123;
        this.updateRowGroupMetaData();
    &#125;

    updateRowGroupMetaData() &#123;
        this.rowGroupMetadata = &#123;&#125;;
        if (this.cars) &#123;
            for (let i = 0; i &lt; this.cars.length; i++) &#123;
                let rowData = this.cars[i];
                let brand = rowData.brand;
                if (i == 0) &#123;
                    this.rowGroupMetadata[brand] = &#123; index: 0, size: 1 &#125;;
                &#125;
                else &#123;
                    let previousRowData = this.cars[i - 1];
                    let previousRowGroup = previousRowData.brand;
                    if (brand === previousRowGroup)
                        this.rowGroupMetadata[brand].size++;
                    else
                        this.rowGroupMetadata[brand] = &#123; index: i, size: 1 &#125;;
                &#125;
            &#125;
        &#125;
    &#125;

&#125;
</code>
</pre>
        </p-tabPanel>

        <p-tabPanel header="tablerowgroupdemo.html">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/table/tablerowgroupdemo.html" class="btn-viewsource" target="_blank">
                <i class="fa fa-github"></i>
                <span>View on GitHub</span>
            </a>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;h3 class="first"&gt;Toggleable Row Groups&lt;/h3&gt;
&lt;p-table [value]="cars" dataKey="brand"&gt;
    &lt;ng-template pTemplate="header"&gt;
        &lt;tr&gt;
            &lt;th&gt;Vin&lt;/th&gt;
            &lt;th&gt;Year&lt;/th&gt;
            &lt;th&gt;Color&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate="body" let-rowData let-rowIndex="rowIndex" let-expanded="expanded" let-columns="columns"&gt;
        &lt;tr class="ui-widget-header" *ngIf="rowGroupMetadata[rowData.brand].index === rowIndex"&gt;
            &lt;td colspan="3"&gt;
                &lt;a href="#" [pRowToggler]="rowData"&gt;
                    &lt;i [ngClass]="expanded ? 'fa fa-fw fa-chevron-circle-down' : 'fa fa-fw fa-chevron-circle-right'"&gt;&lt;/i&gt;
                    &lt;span&gt;&#123;&#123;rowData.brand&#125;&#125;&lt;/span&gt;
                &lt;/a&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate="rowexpansion" let-rowData let-rowIndex="rowIndex"&gt;
        &lt;tr&gt;
            &lt;td&gt;&#123;&#123;rowData.vin&#125;&#125;&lt;/td&gt;
            &lt;td&gt;&#123;&#123;rowData.year&#125;&#125;&lt;/td&gt;
            &lt;td&gt;&#123;&#123;rowData.color&#125;&#125;&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/ng-template&gt;
&lt;/p-table&gt;
    
&lt;h3&gt;Subheader&lt;/h3&gt;
&lt;p-table [value]="cars" sortField="brand" sortMode="single" (onSort)="onSort()"&gt;
    &lt;ng-template pTemplate="header"&gt;
        &lt;tr&gt;
            &lt;th&gt;Vin&lt;/th&gt;
            &lt;th&gt;Year&lt;/th&gt;
            &lt;th&gt;Color&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate="body" let-rowData let-rowIndex="rowIndex"&gt;
        &lt;tr class="ui-widget-header" *ngIf="rowGroupMetadata[rowData.brand].index === rowIndex"&gt;
            &lt;td colspan="3"&gt;
                &lt;span style="font-weight:bold"&gt;&#123;&#123;rowData.brand&#125;&#125;&lt;/span&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;&#123;&#123;rowData.vin&#125;&#125;&lt;/td&gt;
            &lt;td&gt;&#123;&#123;rowData.year&#125;&#125;&lt;/td&gt;
            &lt;td&gt;&#123;&#123;rowData.color&#125;&#125;&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/ng-template&gt;
&lt;/p-table&gt;

&lt;h3&gt;Rowspan&lt;/h3&gt;
&lt;p-table [value]="cars" sortField="brand" sortMode="single" (onSort)="onSort()"&gt;
    &lt;ng-template pTemplate="header"&gt;
        &lt;tr&gt;
            &lt;th&gt;Brand&lt;/th&gt;
            &lt;th&gt;Vin&lt;/th&gt;
            &lt;th&gt;Year&lt;/th&gt;
            &lt;th&gt;Color&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate="body" let-rowData let-rowIndex="rowIndex"&gt;
        &lt;tr&gt;
            &lt;td *ngIf="rowGroupMetadata[rowData.brand].index === rowIndex" [attr.rowspan]="rowGroupMetadata[rowData.brand].size"&gt;
                &#123;&#123;rowData.brand&#125;&#125;
            &lt;/td&gt;
            &lt;td&gt;&#123;&#123;rowData.vin&#125;&#125;&lt;/td&gt;
            &lt;td&gt;&#123;&#123;rowData.year&#125;&#125;&lt;/td&gt;
            &lt;td&gt;&#123;&#123;rowData.color&#125;&#125;&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/ng-template&gt;
&lt;/p-table&gt;
</code>
</pre>
        </p-tabPanel>
    </p-tabView>
</div>
